<template>
	<view class="body">
			<view class="set-userinfo">
				<view class="set-userinfo-list">
					<view class="set-userinfo-list-left">头像</view>
					<view class="set-userinfo-list-right" @click="imageSelect">
						<view class="set-userinfo-list-right-pic">
							<image :src="infoData.avatar_url" mode="aspectFill" lazy-load></image>
						</view>
						<uni-icons class="set-userinfo-list-right-icon" type="compose" size="20"></uni-icons>
					</view>
					
				</view>
				<view class="set-userinfo-list">
					<view class="set-userinfo-list-left">昵称</view>
					<view class="set-userinfo-list-right">
						<input
							class="set-userinfo-list-right-name"
							type="text"
							v-model="infoData.nickname"
						/>
						<uni-icons class="set-userinfo-list-right-icon" type="compose" size="20"></uni-icons>
					</view>
				</view>
				<view class="set-userinfo-list">
					<view class="set-userinfo-list-left">年龄</view>
					<view class="set-userinfo-list-right">
						<input
							class="set-userinfo-list-right-name"
							type="number"
							v-model="infoData.age"
						/>
						<uni-icons class="set-userinfo-list-right-icon" type="compose" size="20"></uni-icons>
					</view>
				</view>
				<view class="set-userinfo-list">
					<view class="set-userinfo-list-left">简介</view>
					<view class="set-userinfo-list-right">
						<input
							class="set-userinfo-list-right-name"
							type="text"
							v-model="infoData.bio"
						/>
						<uni-icons class="set-userinfo-list-right-icon" type="compose" size="20"></uni-icons>
					</view>
				</view>
				<view class="set-userinfo-list">
					<view class="set-userinfo-list-left">联系手机</view>
					<view class="set-userinfo-list-right">
						<input
							class="set-userinfo-list-right-name"
							type="number"
							v-model="infoData.contact_info"
						/>
						<uni-icons class="set-userinfo-list-right-icon" type="compose" size="20"></uni-icons>
					</view>
				</view>
				<view class="set-userinfo-list">
					<view class="set-userinfo-list-left">电子邮箱</view>
					<view class="set-userinfo-list-right">
						<input
							class="set-userinfo-list-right-name"
							type="email"
							v-model="infoData.email"
						/>
						<uni-icons class="set-userinfo-list-right-icon" type="compose" size="20"></uni-icons>
					</view>
				</view>
				<button class="button" type="default" @click="submit">完成</button>
			</view>
		</view>
		
		<!-- 删除 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog
				type="error"
				cancelText="取消"
				confirmText="确定"
				title="提示"
				content="确定修改个人信息吗"
				@confirm="dialogConfirm"
			></uni-popup-dialog>
		</uni-popup>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { storeToRefs } from 'pinia'

import useLoginStore from '@/store/login.js'
import useUserStore from '@/store/user.js'
import { BASE_URL } from '@/service/config.js'

const loginStore = useLoginStore()
const userStore = useUserStore()
const { userInfo } = storeToRefs(loginStore)

const infoData = reactive({
	avatar_url: userInfo.value.avatar_url ?? '',
	bio: userInfo.value.bio ?? '',
	age: userInfo.value.age ?? '',
	contact_info: userInfo.value.contact_info ?? '',
	email:userInfo.value.email ?? '',
	nickname: userInfo.value.nickname ??  ''
})


// 修改头像
function imageSelect() {
	uni.chooseImage({
		count: 1, //默认9
		sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
		sourceType: ['album'], //从相册或者相机选择
		success: (res) => {
		const tempFilePaths = res.tempFilePaths[0]
		uni.uploadFile({
		url: `${BASE_URL}/file/avatar`, //上传图片的后端接口
		header: {
			Authorization: loginStore.token
		},
		filePath: tempFilePaths,
		name: 'avatar',
		success: (res) => {
			console.log(res);
			const obj = JSON.parse(res.data)
			infoData.avatar_url = obj.data.tempUrl
		}
	})
	}
	})
}


// 编辑信息评论
const alertDialog = ref('')
function submit() {
	alertDialog.value.open()
}
function dialogConfirm() {
	userStore.editUserDataAction(userInfo.value.user_id, infoData)
	loginStore.flushUserInfo(userInfo.value.user_id)
}


</script>

<style lang="less">
.body {
	margin: 20rpx 25rpx;

	.set-userinfo {
		border-top: 1rpx solid #f2f2f2;

		.set-userinfo-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 25rpx;
			border-bottom: 1rpx solid #f2f2f2;

			.set-userinfo-list-left {
				font-size: 30rpx;
				color: #989898;
				font-weight: 500;
			}

			.set-userinfo-list-right {
				display: flex;
				justify-content: center;
				align-items: center;

				.set-userinfo-list-right-pic {
					width: 90rpx;
					height: 90rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 100%;
					}
				}

				.set-userinfo-list-right-name {
					display: flex;
					align-items: center;
					font-size: 30rpx;

					text-align: right;
				}

				.set-userinfo-list-right-icon {
					font-size: 45rpx;
					color: #989898;
					margin-left: 30rpx;
				}
			}
		}

		.button {
			margin-top: 30rpx;
			width: 95%;
			background-color: #007aff;
			font-size: 30rpx;
			color: #ffffff;
			border: 0;
		}
	}
}
</style>
